<template>
    <div :class="['list-item']">
      <input type="checkbox" :checked="item.completed" @change="handleToggle" />
      <span class="content">{{ item.title }}-{{ item.completed ? '已' : '未' }}完成</span>
      <button @click="handleRemove">删除</button>
    </div>
</template>
<script>
    export default {
        name: "todoListItem",
        props: ['item'],
  methods: {
    handleRemove() {
      // 触发事件，向 App 组件传递数据
      this.$bus.emit('remove', this.item.id)
    },
    handleToggle() {
      this.$bus.emit('toggle', this.item.id)
    }
  },
       
    };
</script>
<style scoped>
.list-item {
  display: flex;
  margin: 12px 0;
}
.list-item .content {
  flex: 1;
}



</style>